<template>
  <div>
       <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple topleft">
          <h3>运营人员（当天）</h3>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <h1>{{Count1}}</h1>
                <p>工单总数（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <h1>{{Count1}}</h1>
                <p>完成工单（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <h1>{{Count1}}</h1>
                <p>拒绝工单（个）</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light topright">
          <h3>运维人员（当天）</h3>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <h1>{{Count2}}</h1>
                <p>工单总数（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <h1>{{Amount}}</h1>
                <p>月销售额（万元）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <h1>{{Bill}}</h1>
                <p>当月分成（元）</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <div class="row">笔数统计：  <span>{{Count2}}</span>   个        收入统计：  <span>{{Amount1}}</span>   元            分成统计：  <span>{{Bill}}</span>   元</div>
    <TableList :operation="operation" :tabHeader="tabHeader" :list="list" :loading.sync="loading" @newForm="newForm" :newFn="newFn"></TableList>
        <div class="left">
      <span>共{{total}}条记录 第 {{this.params.pageIndex}} / {{totalPage}}</span>
    </div>
    <div class="right">
      <el-button-group>
        <el-button
          type="primary"
          icon="el-icon-arrow-left"
          layout="prev, pager, next"
          :total="total"
          @click="add(1)"
          :disabled="params.pageIndex===1"
        >上一页</el-button>
        <el-button background type="primary" @click="add(2)" :disabled="params.pageIndex===totalPage">
          下一页
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
import TableList from '@/views/user/childrens/components/table'
import { partnerCollect, orderCount1, orderCount2, orderAmount, totalBill } from '@/api/kuser'
export default {
  name: 'Dkd3Index',
  components: {
    TableList
  },
  data () {
    return {
      list: [],
      tabHeader: {
        date: '订单日期',
        ownerName: '合作商',
        ratio: '分成比例',
        orderTotalMoney: '收入（元）',
        orderCount: '笔数'
      },
      params: {
        pageIndex: 1,
        pageSize: 10,
        start: '2023-03-01',
        end: '2023-03-24'
      },
      loading: false,
      newFn: false,
      operation: false,
      totalCount: 0,
      total: 0,
      totalPage: 0,
      Count1: 0,
      Count2: 0,
      Amount: 0,
      Amount1: 0,
      Bill: 0

    }
  },

  created () {
    this.partnerCollect()
    this.orderCount1()
    this.orderCount2()
  },

  methods: {
    async partnerCollect () {
      const res = await partnerCollect(this.params)
      console.log(res)
      this.list = res.currentPageRecords
      this.totalCount = res.totalCount
      this.total = res.totalCount
      this.totalPage = res.totalPage
    },
    newForm (val) {
      this.$refs.addForm.visible = val
    },
    async orderCount1 () {
      const res = await orderCount1()
      this.orderCount1 = res
    },
    async orderCount2 () {
      const res = await orderCount2()
      console.log(res)
      this.Count2 = res
      const res1 = await orderAmount()
      this.Amount = (res1 / 1000000).toFixed(2)
      this.Amount1 = (res1 / 100).toFixed(2)

      const res2 = await totalBill()
      this.Bill = (res2 / 100).toFixed(2)
    }
  }
}
</script>
<style lang="less" scoped>
.topleft {
  h3 {
    text-align: left;
  }
  h1 {
    margin-top: 40px;
    font-size: 40px;
    color: #072074;
  }
  p {
    color: #91a7dc;
    font-size: 14px;
  }
  background-color: #e2efff;
  height: 200px;
  border-radius: 20px;
  padding: 15px;
  margin-right: 10px;
}
.topright {
  h3 {
    text-align: left;
  }
  h1 {
    margin-top: 40px;
    font-size: 40px;
    color: #ff5757;
  }
  p {
    color: #de9690;
    font-size: 14px;
  }
  background-color: #fbefe8;
  height: 200px;
  border-radius: 20px;
  margin-left: 10px;
  padding: 15px;
}
</style>
<style lang="less" scoped>
.left {
  margin-top: 20px;
  float: left;
  span {
    color: #ccc;
    font-size: 16px;
  }
}
.right {
  margin-top: 20px;
  float: right;
}
</style>
<style lang="less" scoped>
.row{
  padding: 15px;
  margin-top: 20px;
  display: block;
  width: 100%;
  float: left;
  background-color: #fff;
  text-align: left;
  font-size: 14px;
  span{
    font-size: 20px;
    color: #ff5757;
    font-weight: bold;
  }
}
</style>
